/**
 * @author:bjzhang
 */

import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableHighlight,
    TouchableOpacity,
    StatusBar
}
from 'react-native'
import renderIf from './renderIf';
export default class PHeadIcon extends Component{
    constructor(props){
        super(props);
    }
    // Back or close botton click
    backEvent(){
        if(typeof this.props.onBackEvent == 'function'){
            this.props.onBackEvent();
        }else{
            this.props.navigation && this.props.navigation.goBack();
        }
    }
    rightEvent(){
        typeof this.props.onRightEvent == 'function' && this.props.onRightEvent();
    }
    render(){
        // let leftTrue = this.props.leftIcon || this.props.leftText;
        // leftTrue = leftTrue || (this.props.rigthIcon || this.props.rightText);
        let opacity = this.props.opacity || 1;
        return(
            <View>
                <StatusBar translucent={true} backgroundColor='transparent' barStyle='light-content' />
                {renderIf(true)(
                    <View style={styles.statusBar}>
                    </View>
                )}
                <View style={styles.container}>
                    <View style={{ marginLeft:15,minWidth:20 }}>
                        {renderIf(this.props.leftIcon)(
                            <TouchableOpacity activeOpacity={.7} onPress={this.backEvent.bind(this)}>
                                <Image source={this.props.leftIcon} />
                            </TouchableOpacity>
                        )}
                        {renderIf(this.props.leftText)(
                            <Text style={styles.buttonText} onPress={this.backEvent.bind(this)}>{this.props.leftText}</Text>
                        )}
                    </View>
                    <View style={[styles.cell]}><Text style={[styles.title]}>{this.props.title.replace(/^\s+|\s+$/g,"")}</Text></View>
                    <View style={{ marginRight:15,minWidth:20 }}>
                        {renderIf(this.props.rightIcon)(
                            <TouchableOpacity activeOpacity={.7} onPress={this.rightEvent.bind(this)}>
                                <Image source={this.props.rightIcon} />
                            </TouchableOpacity>
                        )}
                        {renderIf(this.props.rightText)(
                            <Text style={[styles.buttonText,{ opacity:opacity}]} onPress={this.rightEvent.bind(this)}>{this.props.rightText}</Text>
                        )}
                    </View>
                </View>
            </View>
        );
    }
}
const styles = {
    container:{
        flexDirection:'row',
        backgroundColor:'#43CBFE',
        height:44,
        alignItems:'center',
        justifyContent:'center'
    },
    statusBar:{
        height:20,
        backgroundColor:'#43CBFE'
    },
    cell:{
        flex:1,
        height:44,
        backgroundColor:'transparent',
    },
    title:{
        color:'#fff',
        fontSize:17,
        textAlign:'center',
        margin:10
    },
    buttonText:{
        fontSize:15,
        color:'#fff'
    },
}